import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js';
import { RendererSystem } from '@eva/plugin-renderer';
import { Img, ImgSystem } from '@eva/plugin-renderer-img'; // 引入渲染图片所需要的组件和系统
import { Event, EventSystem, HIT_AREA_TYPE } from '@eva/plugin-renderer-event';
import { Text, TextSystem } from '@eva/plugin-renderer-text';
import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics';
import {StatsSystem} from '@eva/plugin-stats'; // 性能监控

// 1. 添加资源
// 加载超时事件设置
resource.timeout = 1000 * 3;
resource.addResource([
  {
    name: 'image1',
    type: RESOURCE_TYPE.IMAGE,
    src: {
      image: {
        type: 'png',
        url: 'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp'
      }
    },
    preload: false
  },
  {
    name: 'image2',
    type: RESOURCE_TYPE.IMAGE,
    src: {
      image: {
        type: 'png',
        url: 'https://gw.alicdn.com/tfs/TB15Upxqk9l0K4jSZFKXXXFjpXa-750-1624.jpg'
      }
    },
    preload: false
  },
  {
    name: 'heart',
    type: RESOURCE_TYPE.IMAGE,
    src: {
      image:{
        type: 'png',
        // url: 'https://gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png',
        url: 'https://gw.alicdn.com/mt/TB1dEXtcW61gK0jSZFlXXXDKFXa-393-256.png',
      }
    },
    preload: false,
  },1
]);
// 资源预加载
resource.preload();

// 2. 创建游戏
// 创建渲染系统
const domCanvas = document.querySelector('#canvas');
const rendererSystem = new RendererSystem({
  canvas: document.querySelector('#canvas'), // 可选，自动生成 canvas 挂在 game.canvas 上
  // width: domCanvas.width,
  // height: domCanvas.height,
  width: 750,
  height: 1000,
  transparent: true,
  // resolution: window.devicePixelRatio / 2, // 可选, 如果是2倍图设计 可以除以2
  enableScroll: true, // 允许页面滚动
  renderType: 0, // 0:自动判断，1: WebGL，2:Canvas，建议android6.1 ios9 以下使用Canvas，需业务判断。
});
// 创建事件系统
var eventSystem = new EventSystem({
  moveWhenInside: true, // 代表只有在元素内部才会执行move事件，默认为false
});
// 创建游戏对象
const game = new Game({
  frameRate: 60, // 可选，游戏帧率，默认60
  autoStart: true, // 可选，自动开始
  systems: [
    rendererSystem, eventSystem,
    new TextSystem(),
  ],
});
// 性能检测
const statsSystem = game.addSystem(new StatsSystem({
  show: false, // 这里设置是否显示，设为 false 不会运行。
  style: { // 这里到数值全部都是宽度到百分比 vw 单位
    x: 10,
    y: 0,
    width: 20,
    height: 10
  },
}));
// 3.添加游戏对象
game.addSystem(new ImgSystem()); // 给游戏添加渲染图片的能力
game.addSystem(new GraphicsSystem());
const gameObject = new GameObject('gameObj1', {
  size: { width: 200, height: 200 },
  origin: { x: 0.5, y: 0.5 },
  position: { x: 50, y: 68 },
  anchor: { x: 0.5, y: 0.5 },
});
// 4. 获取组件
// 创建时保留组件
const img = gameObject.addComponent(
  new Img({
    resource: 'image1'
  })
);
const imageGraphics = new GameObject('imageGraphics', {
  position: { x: 0, y: 0 },
  size: { width: 0, height: 0 },
});
const paths = [109, 48, 161, 21, 194, 63, 193, 104, 65, 176, 8, 86, 38, 40, 90, 33 ];
const graphics = imageGraphics.addComponent(new Graphics());
graphics.graphics.clear();
graphics.graphics.beginFill(0xcccccc, 2);
graphics.graphics.drawPolygon(paths);
graphics.graphics.endFill();
gameObject.addChild(imageGraphics);
// 事件
const evt = gameObject.addComponent(
  new Event({
    // 使用这个属性设置交互事件可以触发的区域，骨骼动画有所变差，可以临时在当前游戏对象下添加一个同类型同属性的Graphic查看具体点击位置。
    hitArea: {
      type: HIT_AREA_TYPE.Polygon,
      style: { paths: paths },
    },
  }),
);
let touched = false;
evt.on('touchstart', (e) => {
  console.log(e);
  console.log('touchstart');
  touched = true;
});
evt.on('touchend', (e) => {
  console.log('touchend');
  touched = false;
  e.stopPropagation();
});
evt.on('touchmove', (e) => {
  if (touched) {
    const transform = e.gameObject.transform;
    console.log('touchmove');
    console.log(
      transform.size.width * (1 - transform.origin.x),
      transform.size.height * (1 - transform.origin.y),
    );
    transform.position = e.data.position;
  } else {
    // console.log(e.data.position);
  }
});
game.scene.addChild(gameObject); // 把游戏对象放入场景，这样画布上就可以显示这张图片了
// 修改组件属性
// img.resource = 'heart' // 切换资源名称，要确保资源已经被添加到资源管理器
/*
const localPosEventGameObject = new GameObject('', {
  position: {
    x: 200,
    y: 200
  },
  size: {
    width: 300,
    height: 300
  },
  scale: {
    x: .25,
    y: .5
  },
  origin: {
    x: .5,
    y: .5
  },
  rotation: Math.PI * .25
});
const g = localPosEventGameObject.addComponent(new Graphics());
g.graphics.beginFill(0xffaa11).drawRect(0, 0, 300, 300).endFill();

const e = localPosEventGameObject.addComponent(new Event());

e.on('tap', e => {
  console.log(`LocalPosition: [x: ${e.data.localPosition.x}, y: ${e.data.localPosition.y}]`);
});
// game.scene.addChild(localPosEventGameObject);
gameObject.addChild(localPosEventGameObject);
*/